<template>
	<view class="bg_color">
		<!-- #ifndef  H5 -->
		<u-navbar back-text="返回" :title="detail.name"></u-navbar>
		<!-- #endif -->
		<view class="p-header">
			<image :src="detail.image" mode="aspectFill" />
			<text>{{detail.name}}</text>
		</view>
		<view class="u-content">
			<view class="flex-col">
				<view class="flex-row group_13">
					<view class="left-section view_1"> </view>
					<view class="right-group flex-col items-center">
						<image src="/static/bg/product.png" class="image_9" />
						<text class="text_16">产品介绍</text>
					</view>
				</view>
				<text class="text_6 text_18">Product display</text>
			</view>
			<u-parse class="content" :html="detail.content"></u-parse>
		</view>
		<view class="flex-col group_9">
			<view class="flex-col">
				<view class="flex-row group_13">
					<view class="left-section view_1"> </view>
					<view class="right-group flex-col items-center">
						<image src="/static/bg/product.png" class="image_9" />
						<text class="text_16">其他产品</text>
					</view>
				</view>
				<text class="text_6 text_18">Other product </text>
			</view>
			<view class="flex-row list">
				<view @click="toDetail(item)" class="list-item flex-col" :key="i" v-for="(item, i) in product">
					<image class="image_7" :src="item.image" />
					<text class="text_11">{{item.name}}</text>
					<text class="text_13">{{item.describe}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	var vk;
	export default {
		data() {
			return {
				detail: {},
				product: [],
			}
		},
		onLoad(options) {

			that = this;
			vk = that.vk;
			if (!options._id) {
				vk.toast('案例不存在');
				return;
			}
			that.$api.productDetail({
				_id: options._id
			}).then((res) => {
				if (res.code == 0) {
					that.detail = res.data.detail
					that.product = res.data.product
				} else {
					vk.toast('网络开小差了~')
				}
			}).catch((err) => {})
		},
		methods: {
			toDetail(item) {
				vk.redirectTo('/pages/product-detail/product-detail?_id=' + item._id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.p-header {
		display: flex;
		flex-direction: column;
		width: 100%;

		image {
			width: 100%;
			height: 75vw;
		}

		text {
			margin: 16rpx 20rpx;
			color: #d19a60;
			font-size: 18px;
			font-weight: 500;
			line-height: 22px;
			// white-space: nowrap;
			text-transform: uppercase
		}
	}

	.u-content {
		margin-top: 24rpx;

		.content {
			padding: 30rpx 20rpx;
		}

		// padding: 30rpx 20rpx;

	}

	.group_13 {
		color: rgb(34, 34, 34);
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		white-space: nowrap;

		.left-section {
			background-color: $style-color;
			border-radius: 0px 6rpx 6rpx 0px;
			width: 6rpx;
			height: 31rpx;
		}

		.view_1 {
			margin-top: 20rpx;
		}

		.right-group {
			margin-left: 24rpx;
			width: 112rpx;
			position: relative;

			.image_9 {
				width: 60rpx;
				height: 60rpx;
			}

			.text_16 {
				position: absolute;
				left: 0;
				right: 0;
				top: 15rpx;
			}
		}
	}

	.text_6 {
		text-transform: uppercase;
	}

	.text_18 {
		margin-left: 30rpx;
		color: rgb(153, 153, 153);
		font-size: 18rpx;
		font-weight: 200;
		line-height: 25rpx;
		white-space: nowrap;
	}

	.group_9 {
		margin-top: 70rpx;

		.list {
			margin-top: 10rpx;

			.list-item {
				padding: 10rpx 14rpx 10rpx 16rpx;
				flex: 1 1 360rpx;

				.image_7 {
					border-radius: 6rpx;
					filter: drop-shadow(0px 10rpx 10rpx #0000000d);
					width: 330rpx;
					height: 300rpx;
				}

				.text_11 {
					margin-top: 20rpx;
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_13 {
					margin-right: 10rpx;
					margin-top: 10rpx;
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: left;
					text-transform: uppercase;
				}
			}
		}
	}
</style>
